<template>
    <el-space wrap :size="40">
        <div id="main" style="width: 160px;height:160px;"></div>
        <div id="main2" style="width: 160px;height:160px;"></div>
    </el-space>
</template>

<script setup>
import * as echarts from 'echarts';

const props = defineProps({
  numObj:{
    type:Object,
  }
})

onMounted(()=>{
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var myChart2 = echarts.init(document.getElementById('main2'));
let option ={
  color: ['#609FF8','rgba(240,242,245,1)',],
  title: {
      text: '{b|严重破坏}',
      subtext: `{a|${props.numObj.three}%}`,
      subtextStyle:{
        rich:{
          a:{
            fontSize:"18",
            color:'#272727',
            fontWeight:'bolder',
          }
        }
      },
      textStyle:{
        rich:{
          b:{
            fontSize:"18",
            color:'#929292',
            fontWeight:'bolder',
          }
        }
      },
      left: 'center',
      top:55
    },
  series:[{
    type: 'pie',
    radius: ['55%', '90%'], //控制圆环大小
    hoverAnimation: false,
    data: [{value:props.numObj.three},{value:(100 - props.numObj.three)}],
    itemStyle: {
      borderColor: '#fff',
      borderWidth: 3,
    },
    silent:true,
    labelLine: {
        show: false
      },
  }]
};

myChart.setOption(option,true);


myChart2.setOption({
  color: ['#609FF8','rgba(240,242,245,1)',],
  title: {
      text: '{b|毁坏}',
      subtext: `{a|${props.numObj.four}%}`,
      subtextStyle:{
        rich:{
          a:{
            fontSize:"18",
            color:'#272727',
            fontWeight:'bolder',
          }
        }
      },
      textStyle:{
        rich:{
          b:{
            fontSize:"18",
            color:'#929292',
            fontWeight:'bolder',
          }
        }
      },
      left: 'center',
      top:55
    },
  series:[{
    type: 'pie',
    radius: ['55%', '90%'], //控制圆环大小
    hoverAnimation: false,
    data: [{value:props.numObj.four},{value:(100 - props.numObj.four)}],
    itemStyle: {
      borderColor: '#fff',
      borderWidth: 3,
    },
    silent:true,
    labelLine: {
        show: false
      },
  }]
},true);


})


</script>

<style scoped lang="scss">
</style>